import React from "react";
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";
// import MyProvider from "./MyProvider";
import { Provider } from "react-redux";
import store from "../store/index";

const Todo = () => {
  return (
    <Provider store={store}>
      <div className="todo">
        <TodoInput></TodoInput>
        <TodoList></TodoList>
      </div>
    </Provider>
  );
};

export default Todo;
// //对参数进行一个约束
// export interface StateProps {
//   id: number;
//   text: string;
//   isFinished: boolean; //是否已完成
// }

// const Todo = () => {
//    //将需要传递的数据移到myprovider组件中
//     const [todoList, setTodolist] = useState<StateProps[]>([]);

//     //2、创建方法，用于修改todoItem中isFinished的状态
//     const changeTodo = (id: number) => {
//       const newTodoList = todoList.map((item) => {
//         if (item.id === id) {
//           //对象的合并
//           return Object.assign({}, item, {
//             isFinished: !item.isFinished,
//           });
//         }
//         return item;
//       });
//       setTodolist(newTodoList);
//     };

//     //1、向todolist添加数据
//     const addTodo = (todo: StateProps) => {
//       //在原来的列表后面进行追加
//       setTodolist([...todoList, todo]); //这里红色波浪线报错，在useState位置使用泛型，说明todoList的结构为<StateProps[]>结构
//     };

//   return (
//     <MyProvider>
//       <div className="todo">
//         <TodoInput addTodo={addTodo}></TodoInput>
//         <TodoList todoList={todoList} changeTodo={changeTodo}></TodoList>
//       </div>
//     </MyProvider>
//   );
// };

// export default Todo;
